<!-- 播放页头部-->
<template>
  <div class="play-head flex-center-wrap flex-justify-between">
    <img
      @click="goTo('/', { target: '_blank' })"
      class="play-head-logo"
      src="/wwwstatic/images/logo_blue_word_white.png"
    />
    <div class="flex-center-wrap flex-justify-end">
      <div class="head-item app-learn" @mouseenter="handleMouseenter">
        <div class="flex-center">
          <zl-icon icon="icon-appxue" :icon-style="{ width: '22px', height: '22px' }"></zl-icon>
          <span class="head-item-text">APP学</span>
        </div>
        <div class="qrcode-placeholder"></div>
        <div class="qrcode-box">
          <div class="qrcode-wrapper flex-column-wrap flex-justify-center flex-center-wrap">
            <div class="qrcode-title">扫码下载APP</div>
            <img class="qrcode-img" src="//image.zlketang.com/public/news/images/new_official/other/app-download.png" />
            <div class="qrcode-des">
              <p>手机听课支持离线下载</p>
              <p>体验更佳</p>
            </div>
          </div>
        </div>
      </div>
      <div class="head-item feedback flex-center">
        <zl-icon icon="icon-fankui" :icon-style="{ width: '22px', height: '22px' }"></zl-icon>
        <span class="head-item-text" @click="feedback">反馈</span>
      </div>
      <hardware-speed class="head-item feedback flex-center">
        
      </hardware-speed>
      <div  v-if="isLogin" class="head-person">
        <img
          class="head-headimg"
         
          :src="parseResourceUrl(userData.headimgurl)"
          alt="用户头像"
          title="用户头像"
        />
        <ul class="head-person-list">
          <li
            class="flex-center head-person-item"
            v-for="(item, index) in personList"
            :key="index"
            @click="operate(item)"
          >
            {{ item.name }}
          </li>
        </ul>
      </div>
      <div v-else class="head-person">
         <img
          @click="showLogin"
          class="head-headimg-placeholder"
          src="//image.zlketang.com/public/news/images/new_official/home/error-user-header.png"
        />
      </div>
    </div>
  </div>
</template>
<script>
import zlIcon from '@/components/zlIcon.vue'
import hardwareSpeed from './hardwareSpeed.vue'
export default {
  components: {
    'zl-icon': zlIcon,
    'hardware-speed': hardwareSpeed
  },
  data() {
    return {
      personList: [
        {
          name: '我的课程',
          path: '/personal/index.html?name=1',
          method: 'jumpLink'
        },
        {
          name: '我的题库',
          path: '/personal/index.html?name=2',
          method: 'jumpLink'
        },
        {
          name: '备考资料',
           path: '/personal/index.html?name=3',
          method: 'jumpLink'
        },
        {
          name: '选课中心',
           path: '/courses/4.html',
          method: 'jumpLink'
        },
        {
          name: '退出登录',
          method: 'logOut'
        },
      ],
      isLogin:false,
      zlaBtn:{
        key_name:'',
        key_content:''
      }
    }
  },
  computed:{
    userData() {
      return this.$store.state.user.userData
    },
    courseInfo(){
      return this.$store.state.play.courseInfo||{}
    },
    selectInfo(){
      return this.$store.state.play.selectInfo||{}
    },
    key_content(){
      let currentYear = new Date().getFullYear()
      let teacher = this.courseInfo.teachers.filter(item=>item.teacher_id === this.selectInfo.teacher_id)
      teacher = teacher.length?teacher[0]:{}
      return `${this.courseInfo.course_name}_${teacher.teacher_name}_${this.selectInfo.year||currentYear}`
    }
  },
  methods: {
    // 跳转个人中心
    jumpLink(item) {
      this.goTo(item.path,{target:'_blank'})
    },
    operate(item) {
      this.zlaBtn = {
        key_name:item.name,
        key_content:this.key_content
      }
      let func = item.method
      this[func](item)
    },
    logOut() {
      this.$confirm('是否退出登录?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning',
        center: true,
        customClass: 'custom-confirm-box'
      })
        .then(async () => {
          await this.$store.dispatch('user/loginOut')
          this.$message({ type: 'success', message: '退出成功' })
          location.reload()
        })
        .catch(() => {})
    },
    showLogin(){
      this.zlaBtn = {
        key_name:'登录',
        key_content:this.key_content
      }
      this.showLoginDialog()
    },
    //反馈
    feedback() {
      this.zlaBtn = {
        key_name: '反馈',
        key_content: this.key_content
      },
      this.show53Kefu()
    },
    // 鼠标移入
    handleMouseenter(){
      this.zlaBtn = {
        key_name:'app学',
        key_content:this.key_content
      }
    },
    // 之了数据点击
    sendZlaClick() {
      this.keyClick({
        ...this.zlaBtn
      })
    }
  },
  mounted(){
    this.isLogin = this.$store.state.user.isLogin
  },
  watch:{
    zlaBtn: {
      handler() {
        this.sendZlaClick()
      },
      deep: true
    }
  }
}
</script>
<style scoped>
.play-head {
  padding: 0 20px;
  height: 60px;
  color: #8c8c8c;
}
.play-head-logo {
  width: auto;
  height: 40px;
}
.head-item {
  margin-right: 10px;
  padding: 6px 14px;
  cursor: pointer;
  border-radius: 3px;
}
.head-item:hover {
  color: #f0f1f2;
  background-color: #444444;
}
.head-item-text {
  margin-left: 1px;
  font-size: 16px;
}
.app-learn {
  position: relative;
}
.qrcode-placeholder {
  position: absolute;
  left: -30px;
  top: 30px;
  width: 216px;
  height: 20px;
}
.qrcode-placeholder:hover .qrcode-box,
.app-learn:hover .qrcode-box {
  display: block;
}
.qrcode-box {
  display: none;
  position: absolute;
  z-index: 2;
  left: -30px;
  top: 40px;
  width: 216px;
  height: 246px;
  background: #4d4d4d;
  border-radius: 8px;
  color: #ffffff;
}
.qrcode-wrapper {
  height: inherit;
}
.qrcode-title {
  margin-bottom: 20px;
  /* color: #1a2840; */
  font-weight: bold;
  font-size: 16px;
}
.qrcode-img {
  width: 120px;
  height: 120px;
}
.qrcode-des {
  margin-top: 10px;
  font-size: 12px;
  /* color: #667080; */
  text-align: center;
}
.head-person {
  position: relative;
  margin-left: 40px;
  padding: 10px;
}
.head-person:hover .head-person-list {
  display: block;
}
.head-headimg {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.head-headimg-placeholder {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
}
.head-person-placeholder {
  /* css-ignore */
  position: absolute;
  top: 40px;
  left: -30px;
  width: 76px;
  height: 20px;
  cursor: pointer;
}
.head-person-list {
  display: none;
  position: absolute;
  left: -48px;
  top: 60px;
  width: 100px;
  padding: 10px 0;
  color: #ffffff;
  background: #393939;
  border-radius: 3px;
  z-index: 2;
}
.head-person-item {
  height: 30px;
  font-size: 14px;
  cursor: pointer;
}
.head-person-item:hover {
  color: #ffffff;
  background: #4d4d4d;
}
.play-head /deep/ .hardware-speed .feedback-ico{
  top: 0;
}
.play-head /deep/ .hardware-speed .feedback-text{
  margin: 0 0 0 1px;
}
.play-head /deep/ .hardware-speed:hover{
  background: #4d4d4d;
}
.play-head /deep/ .hardware-speed:hover .feedback-text{
  color: #ffffff;
}
</style>